<template>
  <div class="edit-photo">
    <input type="file" hidden ref="inputFile" @change="onChange" />
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="我的头像"
      left-arrow
      @click-left="$emit('close')"
    />
    <!-- /导航栏 -->
    <img class="origin-photo" :src="photoCopy" ref="img"  />
    <van-button
      class="choose-btn"
      type="info"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      @click="$refs.inputFile.click()"
    >
      选择新头像
    </van-button>
    <div class="toolbar">
      <span @click="onCancel">取消</span>
      <span @click="onConfirm">完成</span>
    </div>
  </div>
</template>

<script>
// 导入cropper及其样式文件
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
import { modifyUserAvatar } from '@/api/userInfo.js'
export default {
  name: 'EditUserPhoto',
  data () {
    return {
      cropper: null,
      photoCopy: this.photo
    }
  },
  created () {},
  mounted () {
    this.initCropper()
  },
  props: {
    photo: {
      type: String,
      required: true
    }
  },
  methods: {
    initCropper () {
      const image = this.$refs.img
      this.cropper = new Cropper(image, {
        viewMode: 1, // 只能在裁剪的图片范围内移动
        dragMode: 'move', // 画布和图片都可以移动
        aspectRatio: 1, // 裁剪区默认正方形   autoCropArea: 1, // 自动调整裁剪图片
        cropBoxMovable: false, // 禁止裁剪区移动
        cropBoxResizable: false, // 禁止裁剪区缩放
        background: false // 关闭默认背景
      })
    },
    onChange () {
      const file = this.$refs.inputFile.files[0]
      // 基于文章对象获取 blob 数据
      this.photoCopy = window.URL.createObjectURL(file)
      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕，把它的 value 清空
      this.cropper.replace(this.photoCopy) // 销毁旧的裁剪区域
      this.cropper.reset()
      // 重新设置图片路径
      this.$refs.inputFile.value = ''
    },
    onCancel () {
      this.photoCopy = this.photo
      this.cropper.replace(this.photoCopy)
      this.cropper.reset()
      this.$emit('close')
    },
    onConfirm () {
      // 基于服务端的裁切使用 getData 方法获取裁切参数
      // console.log(this.cropper.getData())
      // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象
      this.cropper.getCroppedCanvas().toBlob((blob) => {
        this.updateUserPhoto(blob)
      })
    },
    async updateUserPhoto (blob) {
      this.$toast.loading({
        message: '保存中...',
        forbidClick: true, // 禁止背景点击
        duration: 0 // 持续展示
      })
      try {
        // 错误的用法
        // 如果接口要求 Content-Type 是 application/json
        // 则传递普通 JavaScript 对象
        // updateUserPhoto({
        //   photo: blob
        // })

        // 如果接口要求 Content-Type 是 multipart/form-data
        // 则你必须传递 FormData 对象
        const formData = new FormData()
        formData.append('photo', blob)
        const { data } = await modifyUserAvatar(formData)
        // 关闭弹出层
        this.$emit('close')

        // 更新视图
        this.$emit('sure', data.data.photo)
        // 提示成功
        this.$toast.success('更新成功')
      } catch (err) {
        this.$toast.fail('更新失败')
      }
    }
  },
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.edit-photo {
  height: 100%;
  .origin-photo{
    display: none;
  }
  .toolbar {
    position: fixed;
    bottom: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 28px;
    color: #fff;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .choose-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
